import React, { useEffect, useState } from 'react';
import { Input, Button, Table, message, Popconfirm, Upload, Modal, Select } from 'antd';


import { custom_search, custom_del, custom_delmany, custom_changeleader } from '../../../utils/api'
import { DeleteOutlined, } from '@ant-design/icons';



const { Search } = Input;
const {Option}=Select;
function CustomManage(props) {
 // 引入组件状态
  //客户列表
  const [customlist, setCustomlist] = useState([])
  var [total, setTotal] = useState(0);//客户总数
  var [current, setCurrent] = useState(1);//当前页码
  var [loading, setLoading] = useState(false);//loading状态
  var [searchKey, setSearchKey] = useState(''); //搜索关键词
  //多个客户id的数组
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  //控制设定负责人弹框是否显示隐藏
  const [isModalVisible, setIsModalVisible] = useState(false)
  //获取负责人列表
  const [list, setList] = useState([])
  //或去下拉选中负责人----要修改的
  const [v, setV] = useState('')


  //引入生命周期函数
  useEffect(() => {
    setLoading(true);
    custom_search({ searchKey: '', page: 1, count: 10 }).then((res) => {
      console.log(res.data.list);
      setCustomlist(res.data.list);
      setTotal(res.data.total);
      setLoading(false);
      setList(res.data.list)
    })
  }, [])


  //点击"搜索"时执行
  var onSearch = value => {
    setSearchKey(value);//保存搜索的关键词
    //发起模糊搜索请求
    setLoading(true);
    custom_search({ searchKey: value, page: 1, count: 10 }).then((res) => {
      setCustomlist(res.data.list);
      setTotal(res.data.total);
      setLoading(false);
    })
  };

  //页码发生改变时 调用,通过第一个参数pagination获取到最新页码
  var onChangee = (pagination) => {
    var { current } = pagination;
    setCurrent(current);//保存页码
    //重新发起分页请求
    setLoading(true);
    custom_search({ searchKey, page: current, count: 10 }).then((res) => {
      setCustomlist(res.data.list);
      setTotal(res.data.total);
      setLoading(false);
    })
  };

  //点击"确认删除" 调用该方法
  var confirm = (id) => {
    custom_del({ id, searchKey, page: current, count: 10 }).then((res) => {
      console.log(res.data);
      if (res.data.code === 200) {
        setCustomlist(res.data.list);
        setTotal(res.data.total);
        message.success(res.data.msg);
      }
    })
  }

  //点击"取消" 调用该方法
  var cancel = () => {

  }

  //上传状态发生改变时 执行
  var onChange = (res) => {
    if (res.file.response && res.file.response.code === 200 && res.file.status === 'done') {
      message.success(res.file.response && res.file.response.msg);
      return;
    }
  }

  //表格行的选择发生改变时执行
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  //发起 删除多个客户请求
  var onDelete = () => {
    custom_delmany({ keys: selectedRowKeys, searchKey, page: current, count: 10 }).then((res) => {
      if (res.data.code === 200) {
        message.success(res.data.msg);
        setCustomlist(res.data.list);
      setTotal(res.data.total);
      } else {
        message.error(res.data.msg);
      }
    })
  }

  //设定负责人弹框
  var leader = () => {
    setIsModalVisible(true)
  }
 //点击弹框确定确定修改负责人
  const handleOk = () => {
    console.log(2222,);
    setV(v)
    custom_changeleader({
      leader:v,keys: selectedRowKeys, searchKey, page: current, count: 10}).then((res)=>{
        if(res.data.code===200){
          setIsModalVisible(false)
          message.success(res.data.msg)
          setCustomlist(res.data.list);
          setTotal(res.data.total);
        }
        console.log(res.list);
      })

  }
  
  //获取下拉框要修改的负责人
  const selOnChange=(v)=>{
    
    setV(v)
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: '150',
      ellipsis: true
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: '150',
      ellipsis: true
    },
    {
      title: '邮箱',
      dataIndex: 'mailbox',
      key: 'mailbox',
      width: '150',
      ellipsis: true
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: '150',
      ellipsis: true
    },
    {
      title: '负责人',
      dataIndex: 'leader',
      key: 'leader',
      width: '150',
      ellipsis: true
    },
    {
      title: '呼入时间',
      dataIndex: 'time',
      key: 'time',
      width: '150',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'age',
      render: text => {
        return (<>
          <Popconfirm
            title="确认删除该员工吗?"
            onConfirm={() => { confirm(text._id) }}
            onCancel={cancel}
            okText="确定删除"
            cancelText="取消"
          >
            <i className='iconfont icon-shanchu'></i>
          </Popconfirm>
        </>)
      }
    },
  ];

 


  

  return (
    <div className='customManage'>
      <div className='title'>客户管理</div>
      <div className="ope">
        <Search placeholder="搜索客户姓名" onSearch={onSearch} enterButton />
        <div className='button_box'>
          <div className='left'>
            <Button >创建人工外呼</Button>
            <Button >写入机器外呼</Button>
            <Button >发送消息</Button>
            <Button  disabled={selectedRowKeys.length === 0} onClick={leader}>设定负责人</Button>
            <Button  disabled={selectedRowKeys.length === 0} onClick={onDelete}>
              <DeleteOutlined />
            </Button>
          </div>
          <div className='button_box_right'>
            <Upload
              name="excel"
              action="/api/custom/import"
              onChange={onChange}
              // accept="application/vnd.ms-excel"
              headers={{ 'Authorization': 'Bearer ' + localStorage.getItem('token') }}
            >
              <Button type="primary">导入客户</Button>
            </Upload>

            <div>
              <Button type="primary" href='/api/custom/export'>导出客户</Button>
            </div>
          </div>
        </div>
        <Table
          loading={loading}
          size='small'
          onChange={onChangee}
          columns={columns}
          dataSource={customlist}
          rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
          pagination={{ current, pageSize: 10, total }}
        />

      </div>
      <Modal title="设置负责人"
        okText="确认"
        cancelText="取消"
        visible={isModalVisible} onOk={handleOk} onCancel={() => { setIsModalVisible(false) }}>
        <Select
        style={{width:'100%'}}
        onChange={selOnChange}
        >
          {
            list&&list.map((item,index)=><Option key={index} value={item.leader}>{item.leader}</Option>)
          }
        </Select>
      </Modal>
    </div>
  );
}

export default CustomManage;